<template>
	<el-button primary @click="addInit" style="float: right;">+增加</el-button>
	<el-table
	  :data="tableData"
	  style="width: 100%"
	  stripe
	  ref="multipleTable"
	   @selection-change="handleSelectionChange"
	   :header-cell-style="{background:'#eef1f6',color:'#606266'}"
	>
		<el-table-column min-width="15%" type="selection"></el-table-column>
		<el-table-column prop="score" label="分数" sortable  width="80" />
		<el-table-column prop="student.name" label="学生姓名" sortable />
		<el-table-column prop="activity.description" label="活动名称" />
		<el-table-column prop="state" label="状态" :formatter="formatProtocolType"/>
		<el-table-column label="操作" width="120"> 
		   <template #default="scope">
			  <el-button size="small" @click="initEdit(scope.row)"
				type="primary" circle><el-icon><Edit /></el-icon></el-button>
				
				<el-popconfirm title="确定要删除吗?" @confirm="handleDelete(scope.row.id)">
				    <template #reference>
					  <el-button
						size="small"
						type="danger"
						@click=""
						 circle><el-icon><Delete /></el-icon></el-button>
				    </template>
				</el-popconfirm>
				 
			</template>				
		</el-table-column>
	</el-table>    
	 <!-- 分页组件 -->
	<el-pagination
	  small
	  background
	  layout="prev, pager, next"
		:page-size="pageSize"
	  :total="total"
		:current-page="currentPage"
		@current-change="haddlePageChange"
	/> 
	  
	<!-- 增加对话框 -->
	<el-dialog v-model="dialogVisible" title="增加" width="60%" draggable>
	  <!-- <span>增加</span> -->
	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	      <el-form-item label="编号" prop="id">
	        <el-input v-model="form.id" />
	      </el-form-item>
	      <el-form-item label="学生得分" prop="score">
	        <el-input v-model="form.score" />
	      </el-form-item>
		      		
		  <el-form-item label="学生姓名">
			    <el-select v-model="form.student" value-key="name" placeholder="请选择" width="200px">
			  	  <el-option v-for="item in studentOption"
						:key="item.id"
						:label="item.name"
						:value="item">
					</el-option>
				</el-select>
			  </el-form-item>
			<el-form-item label="活动名称">
				<el-select v-model="form.activity" value-key="description" placeholder="请选择" width="200px">
					<el-option v-for="item in activityOption"
						:key="item.id"
						:label="item.description"
						:value="item">
					</el-option>
				</el-select>
			</el-form-item>
	      <el-form-item label="活动状态">
	        <el-input v-model="form.state" :formatter="formatProtocolType"/>
	      </el-form-item>  
	   </el-form>
	  <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="dialogVisible = false">取消</el-button>
	      <el-button type="primary" @click="addSubmit()">提交</el-button
	      >
	    </span>
	  </template>
	</el-dialog>
		
	<!--  修改对话框 -->
	<el-dialog v-model="editVisible" title="修改" width="60%" draggable>
	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	      <el-form-item label="编号" prop="id">
	        <el-input v-model="form.id" />
	      </el-form-item>
	      <el-form-item label="学生得分" prop="score">
	        <el-input v-model="form.score" />
	      </el-form-item>	
	      <el-form-item label="学生姓名">
	      			    <el-select v-model="form.student" value-key="name" placeholder="请选择" width="200px">
	      			  	  <el-option v-for="item in studentOption"
	      						:key="item.id"
	      						:label="item.name"
	      						:value="item">
	      					</el-option>
	      				</el-select>
	      			  </el-form-item>
	      			<el-form-item label="活动名称">
	      				<el-select v-model="form.activity" value-key="description" placeholder="请选择" width="200px">
	      					<el-option v-for="item in activityOption"
	      						:key="item.id"
	      						:label="item.description"
	      						:value="item">
	      					</el-option>
	      				</el-select>
	      			</el-form-item>
	      <el-form-item label="活动状态">
	        <el-input v-model="form.state" :formatter="formatProtocolType"/>
	      </el-form-item>
	   </el-form>
	  <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="editVisible = false">取消</el-button>
	      <el-button type="primary" @click="editSubmit()">提交</el-button
	      >
	    </span>
	  </template>
	</el-dialog>  
	
</template>

<script setup>
	import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'
	import{ useRouter } from 'vue-router'
	let { proxy } = getCurrentInstance();
	// import TEditor from '../components/TEditor.vue'
	
	var tableData=ref([]);
	var total=ref(0)//总页数
	var pageSize=ref(4)
	var currentPage=ref(1)
	
	let pagination = ref({
		"pagination":{
			"pageNo":currentPage,
			"pageSize":pageSize,
		}
	})
	
	
	function getTableData(){
		proxy.$http.post('/saFind',pagination.value,{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			tableData.value=res.data.data;//把获取的服务端数据数组传递给tableData
			//因后台未返回总条数数据，只返回总页数，用页数乘以每页条数约等于总条数，页组件属性中用到这个变量，因本身不显示，显示总页数不影响
			total.value=res.data.data.totalPages*pageSize.value;
			//console.log(tableData.vale)
		})
		.catch(err => {
			console.log(err)
		});
	}
	
	let studentOption=ref([]);
	let activityOption=ref([]);
	//onMounted钩子函数，组件加载完自动执行
	onMounted(()=>{
		getTableData(); 
		 //请求第一页的表格数据
		 proxy.$http.get("/saFindStudentsname",{"headers":{"token":window.sessionStorage.getItem("token")}})
		 .then(res => {
		 	studentOption.value=res.data.data;//获取学院下拉数据，仅仅id和名称
		 })
		 proxy.$http.get("/FindAllActivity",{"headers":{"token":window.sessionStorage.getItem("token")}})
		 .then(res => {
		 	activityOption.value=res.data.data;//获取学院下拉数据，仅仅id和名称
		 })
	});
	
	function handleChange (item) {
		console.log('change', item)
	}

	let form=ref({});//修改或增加的一个对象	
	//增加对话框显示与否
	const dialogVisible = ref(false)
	function addInit(){
		dialogVisible.value = true
		proxy.$http.get("/saFindStudentsname",{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			studentOption.value=res.data.data;//获取学院下拉数据，仅仅id和名称
		})
		proxy.$http.get("/FindAllActivity",{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			activityOption.value=res.data.data;//获取学院下拉数据，仅仅id和名称
		})
	}
	//增加提交
	function addSubmit(){
		console.log(form.value)
		proxy.$http.post('/saAdd',form.value,{"headers":{"token":window.sessionStorage.getItem("token")}}) //按增加数据的接口组织url
		.then(res => {
			dialogVisible.value = false //关闭对话框		
			getTableData();  //更新表格数据
			form.value={}  //清空增加对象
			alert(res.data.message)
		})
	}
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange(currentpage){			
		currentPage.value=currentpage;
		getTableData();
		
	}
	
	//修改对话框显示与否
	let editVisible=ref(false)
	//修改对话框显示出来，数据初始化
	const initEdit = (row) => {
		editVisible.value = true
		form.value=row  //要修改的对象赋值给对话框表单数据
		proxy.$http.get("/saFindStudentsname",{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			studentOption.value=res.data.data;//获取学院下拉数据，仅仅id和名称
		})
		proxy.$http.get("/FindAllActivity",{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			activityOption.value=res.data.data;//获取学院下拉数据，仅仅id和名称
		})
	}
	//修改提交
	const editSubmit=()=>{
		//form.value.faculty={id:selDepartmentId.value[1]}
		proxy.$http.post('/saUpdate',form.value,{"headers":{"token":window.sessionStorage.getItem("token")}})  ////按修改数据的接口组织url
		.then(res => {								
			editVisible.value = false	//关闭对话框		
			getTableData();  //更新表格数据
			form.value={}  //清空修改对象
			alert(res.data.message)	
		})
	}
	const handleDelete = (id) => {
		proxy.$http.get('/saDelete'+"?id="+id,{"headers":{"token":window.sessionStorage.getItem("token")}})  //根据接口组织删除用url：/school/deleteById/{id}
		.then(res => {			
			getTableData();  //更新表格数据
			alert(res.data.message)
		})
	}
	
	//文本框输入内容校验
	const isNum = (rule, value, callback) => {
		const id = /^[0-9]*$/
		if(value==''||value==null)  //补充了非空和长度校验
		    callback(new Error('活动编号不能为空!'))
		else if(value.length>=1||value.length<=4)
			callback(new Error('活动编号数字个数应为1至4!'))
		else if (!id.test(value)) {
			callback(new Error('请输入数字编号!'))
		} else {
			callback()
		}	  
	
	};
	const formRules = reactive({
		id: [
		  {validator: isNum, trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
		],
		description: [
		  {required: true, message: '请输入活动名称', trigger: 'blur'},
		  {min: 4, max: 10, message: '长度在4 到 10 个字符', trigger: 'blur'}
		],		
	})
	
function  formatProtocolType(row) {
  　　let type = row.state;
 　　switch (type) {
  　　　　case 1:
  　　　　　　type = "通过";
  　　　　　　break;
  　　　　case 0:
  　　　　　　type = "待审核";
 　　　　　　break;
 　　　　case 2:
 　type = "未通过";
break;
 　　}
 
 　　return type;
 
 }
</script>